<template>
	<view class="box bg-white padding-l-r-30">
		<view class="comment-box">
			<!-- 评论标题 -->
			<view class="fs-28 color-0 title">商品评论</view>
			
			<!-- 评论输入区域 -->
			<view class="comment-input-area">
				<u--textarea v-model="commentContent" placeholder="请输入评论内容..." count :maxlength='200'></u--textarea>
			</view>
			
			<!-- 图片上传区域 -->
			<view class="image-upload-area">
				<view class="fs-28 color-0 title">上传评论图片</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn border-radio-14 bg-43 color-white align-items-center" @click="submitComment">提交评论</view>
	</view>
</template>

<script>
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl + 'api/'
    import { evaluateOrder } from "@/api/order.js"
	export default {
		data() {
			return {
                orderId:'',
				commentContent: '', // 评论内容
				fileList1: [] // 已上传的图片路径
			};
		},
        onLoad(options) {
            this.orderId = options.id
        },
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url); 
					console.log(result );
                    if(result ){
						console.log(2);
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
							Object.assign(item, {
								status: "success",
								message: "",
								url: result,
							})
						);
						fileListLen++;
					}else{
						console.log(12);
						this[`fileList${event.name}`].splice(fileListLen, 1);
					}
					
				}
			},
			uploadFilePromise(url) { 
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:BASE_URL+ 'common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						
						formData: {
							token:uni.getStorageSync('token')
						},
						success: (res) => {
                            let data = JSON.parse(res.data); 
							console.log(data);
							if(data.code ){
								resolve(data.data.fullurl);
							}else {
								uni.showToast({
									icon:'none',
									title:data.msg
								})
								resolve( '' );
							}
							
						},
						fail(e) {
							console.log(e);
						}
					});
				});
			},
			// 提交评论
			submitComment() {
                console.log(this.fileList1);
				if (!this.commentContent.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return;
				}
                let images=''
                if(this.fileList1.length){
                    images = this.fileList1.map(item=>item.url).join(',')
                }
               let data = { 
                    order_id: this.orderId,
                    content: this.commentContent,
                    images 
                }
                evaluateOrder(data).then(res => { 
                    if (res.code == 1) { 
                       	uni.showToast({
                            title: '评论提交成功',
                            icon: 'none'
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1000);
                    }else{
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }

                })
				// 清空表单
				this.commentContent = '';
				this.uploadedImages = [];
			}
		}
	};
</script>

<style lang="less" scoped>
	.title {
		line-height: 98rpx;
	}
	.comment-box {
		min-height: 80vh;
	}
	.submit-btn {
		text-align: center;
		justify-content: center;
		height: 90rpx;
	}
</style>